<template>
  <LayoutNav></LayoutNav>
  <div class="layout">
    <div class="layout-side" :class="{ 'hidden-menu': !isMenu }" v-if="!menuLoad">
      <template v-for="(item, index) in menuList" :key="index">
        <div v-if="item.children" v-show="curNav == index">
          <el-menu :default-active="$utils.getMenuString(activeMenu)">
            <LayoutSideMenu
              ref="LayoutSideMenuRef"
              :data="item.children"
            ></LayoutSideMenu>
          </el-menu>
        </div>
      </template>
    </div>
    <div class="layout-body" :class="{ 'hidden-menu': !isMenu }" v-if="!bodyLoad">
      <router-view></router-view>
    </div>
    <div class="layout-footer" :class="{ 'hidden-menu': !isMenu }"></div>
  </div>
</template>
<script lang="ts" setup>
import "@/theme/css/style.scss";
import LayoutNav from "./LayoutNav.vue";
import LayoutSideMenu from "./LayoutSideMenu.vue";
import { ref, computed, watch,getCurrentInstance, onMounted ,nextTick} from "vue";
import { useRouter, useRoute } from "vue-router";
import { useMenus } from "@/store";
import { pa } from "element-plus/es/locale";

const {
  proxy: { $message, $utils },
} = getCurrentInstance() as any;

const MenusStore = useMenus();

const menuList = ref(MenusStore.getMenus);

const router = useRouter();

const route = useRoute();

const curNav = ref<any>(MenusStore.curNav);

const isMenu = ref<boolean>(MenusStore.isMenu);

const menuLoad = ref<boolean>(false);

const bodyLoad = ref<boolean>(true)

const activeMenu = computed(() => {
  const { meta, path } = route;
  if (meta.activeMenu) {
    return meta.activeMenu as string;
  }
  return path;
});

watch(
  () => MenusStore.curNav,
  (val) => {
    curNav.value = val;
    if (
      menuList.value[val]?.children &&
      menuList.value[val].children.length > 0
    ) {
      isMenu.value = true;
      MenusStore.setIsMenu(true);
    }
  },
  { deep: true }
);

watch(
  () => MenusStore.isMenu,
  (val) => {
    isMenu.value = val;
  },
  { deep: true }
);

watch(
  () => MenusStore.getMenus,
  (val) => {
    menuLoad.value = true;
    menuList.value = val
    MenusStore.initMenus(val);
    setTimeout(() => {
      menuLoad.value = false;
    }, 100);
  },
  { deep: true }
);

onMounted(()=>{
  nextTick(()=>{
    bodyLoad.value = false
  })
})
</script>
<style scoped>
.layout-side {
  overflow-x: hidden;
  position: fixed;
  width: 176px;
  z-index: 99;
  height: calc(100% - 51px);
  border-right: 1px solid var(--el-border-color-lighter);
  top: 51px;
  padding: 10px 0;
  -webkit-transition: all 0.1s ease-in-out;
  transition: all 0.1s ease-in-out;
  background: #ffffff;
}

.layout-side.hidden-menu {
  width: 0;
}
.layout-side .el-menu {
  border-right: none;
}
.layout-body {
  left: 176px;
  top: 51px;
  position: absolute;
  width: calc(100% - 216px);
  height: calc(100% - 40px - 51px - 51px);
  padding: 20px;
  background: #efefef;
  overflow-y: scroll;
  -webkit-transition: all 0.1s ease-in-out;
  transition: all 0.1s ease-in-out;
}
.layout-body.hidden-menu {
  left: 0;
  width: calc(100% - 40px);
}
.layout-footer {
  width: calc(100% - 176px);
  left: 176px;
  text-align: center;
  position: fixed;
  bottom: 0;
  height: 50px;
  border-top: 1px solid var(--el-border-color-lighter);
  -webkit-transition: all 0.1s ease-in-out;
  transition: all 0.1s ease-in-out;
}
.layout-footer.hidden-menu {
  left: 0;
  width: 100%;
}
.layout-footer img {
  margin: 10px auto;
  height: 30px;
}
</style>
  